/*
  学习目标：props的基本使用
  本质: 组件标签身上的所有属性, 组成的一个对象
  掌握:
      1. 类组件中获取props
      2. 函数式组件中获取props
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        App
        {/* 💥 属性值除了字符串, 其它的都放在{} */}
        <Child name="zs" intro="狂徒" age={18}></Child>
        <Header name="ls" intro="程序员"></Header>
      </div>
    );
  }
}

// 💥 函数式组件, 通过形参获取props对象
// 👍 推荐解构props
function Header({ name, intro }) {
  return (
    <h1>
      Header - {name} - {intro}
    </h1>
  );
}

class Child extends React.Component {
  // 💥 类组件中: 通过this.props获取props对象
  render() {
    const { name, intro } = this.props;
    return (
      <div>
        Child - {name} - {intro}
      </div>
    );
  }
}

// 类组件: this.props
// 函数: 形参
// 👍解构
// props: 对象, 组件标签身上所有的属性,组成的对象
